<template>
  <ul>
    <transition-group name="list">
      <MainItem
        v-for="todo in todoList"
        :key="todo.id"
        :todo="todo"
        :checkTodo="checkTodo"
        :deleteTodo="deleteTodo"
      />
    </transition-group>
  </ul>
</template>

<script>
import MainItem from "./MainItem.vue";
export default {
  name: "todo-main",
  components: {
    MainItem,
  },
  // 子组件使用父组件传来的props数据
  props: ["todoList", "checkTodo", "deleteTodo"],
};
</script>

<style scoped>
ul {
  list-style: none;
  margin-top: 10px;
}
.list-enter,
.list-leave-to {
  transform: translateX(150px);
  opacity: 0;
}
.list-enter-to,
.list-leave {
  transform: translateX(0);
  opacity: 1;
}
.list-enter-active,
.list-leave-active {
  transition: all 0.5s linear ;
}
</style>